<template>
  <div class="home">
     <div class="node_header">
      <!-- <div><img src="../assets/logo.png" /></div> -->
      <div class="node_header_input">
        <van-search

          shape="round"
          background="red"
          placeholder="请输入搜索关键词"
        />
      </div>
      <div class="node_header_nr">
        <ul>
          <li>首页</li>
          <li>新手入门</li>
          <li>API</li>
          <li>关于</li>
          <li>注册</li>
          <li>登录</li>
        </ul>
      </div>
    </div>
    <div class="node_content">
       <van-tabs v-model="active" @click="onClick">
      <van-tab name="全部" title="全部"></van-tab>
      <van-tab name="精华" title="精华"></van-tab>
      <van-tab name="分享" title="分享"></van-tab>
      <van-tab name="问答" title="问答"></van-tab>
      <van-tab name="招聘" title="招聘"></van-tab>
      <van-tab name="客户端测试" title="客户端测试"></van-tab>
    </van-tabs>
       <div v-for="(item, index) in showList" :key="index" class="nr">
      {{item.title}}
    </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      list:[],
      showList:[],
      active: "全部",
    };
  },
  
  created(){
    this.$axios.get('/list.json').then((res)=>{
      var temp=res.data.data;
      temp.forEach((ele)=>{
        if(ele.tab==="share"){
          ele.tab="分享"
        }else if(ele.tab==="ask"){
          ele.tab="问答"
        }else if(ele.tab==="job"){
          ele.tab='精华'
        }else if(ele.tab==="good"){
          ele.tab="招职"
        }
        this.list.push(ele);
      });
      this.showList=this.list
    });
    var actives=localStorage.getItem('active');
    if(actives){
      this.active=actives
    }
  },
 methods: {
    onClick(key) {
      console.log(this.showList)
      //点击切换
      this.active = key;
      localStorage.setItem("active",this.active)
      console.log(key);
      this.showList = [];
      switch (this.active) {
        case "全部":
          this.showList = this.list;
          break;
        case "精华":
          this.list.forEach((ele) => {
            if (ele.tab == "精华") {
              this.showList.push(ele);
            }
          });
          break;
        case "精华":
          this.list.forEach((ele) => {
            if (ele.tab == "精华") {
              this.showList.push(ele);
            }
          });
          break;
        case "分享":
          this.list.forEach((ele) => {
            if (ele.tab == "分享") {
              this.showList.push(ele);
            }
          });
          break;
        case "问答":
          this.list.forEach((ele) => {
            if (ele.tab == "问答") {
              this.showList.push(ele);
            }
          });
          break;
          case "招聘":
          this.list.forEach((ele) => {
            if (ele.tab == "招聘") {
              this.showList.push(ele);
            }
          });
          break;
          case "客户端测试":
          this.list.forEach((ele) => {
            if (ele.tab == "客户端测试") {
              this.showList.push(ele);
            }
          });
          break;
        default: this.showList = this.list;
          break;
      }
    },
 }
};
</script>
<style lang="scss">
.top {
  width: 100%;
  height: 30vh;
  background: rgb(120, 236, 178);
}
ul{
  display: flex;
  justify-content: space-around;
}
</style>
